/*
 * @Description:
 * @Autor: lcz
 * @Date: 2022-06-15 19:30:21
 * @LastEditors: lcz
 * @LastEditTime: 2022-08-31 23:04:07
 */
import { Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import React, { useMemo } from 'react'
interface DataType {
  [k: string]: any
}
const getRowSpanCount = (data: any[], key: string | number, target: string | number) => {
  if (!Array.isArray(data)) return 1
  data = data.map(_ => _[key]) // 只取出筛选项
  let preValue = data[0]
  const res = [[preValue]] // 放进二维数组里
  let index = 0 // 二维数组下标
  for (let i = 1; i < data.length; i++) {
    if (data[i] === preValue) {
      // 相同放进二维数组
      res[index].push(data[i])
    } else {
      // 不相同二维数组下标后移
      index += 1
      res[index] = []
      res[index].push(data[i])
      preValue = data[i]
    }
  }
  const arr: number[] = []
  res.forEach(_ => {
    const len = _.length
    for (let i = 0; i < len; i++) {
      arr.push(i === 0 ? len : 0)
    }
  })
  //@ts-ignore
  return arr[target]
}
const data: DataType[] = [
  {
    key: '1',
    name: '85/万吨每年',
    bumen: '炼化D车间',
    csType: '工程技术',
    csType1: '工程技术',
    csType2: '加热',
    cs: '管控措施1',
  },
  {
    key: '2',
    name: '85/万吨每年',
    bumen: '炼化D车间',
    csType: '工程技术',
    csType1: '工程技术',
    csType2: '加热2',
    cs: '管控措施2',
  },
  {
    key: '3',
    name: '85/万吨每年',
    bumen: '炼化D车间',
    csType: '工程技术',
    csType1: '工程技术',
    csType2: '加热3',
    cs: '管控措施3',
  },
]
const GroupTable = () => {
  const memoColums = useMemo(() => {
    let columnsConfig = [
      {
        dataIndex: 'key',
        name: '序号',
      },
      {
        dataIndex: 'name',
        name: '生产装置',
      },
      {
        dataIndex: 'bumen',
        name: '责任部门',
        colSpan: 1,
      },
      {
        dataIndex: 'csType',
        name: '管控措施分类',
        colSpan: 3,
      },
      {
        dataIndex: 'csType1',
        name: '管控措施分类',
        colSpan: 0,
      },
      {
        dataIndex: 'csType2',
        name: '管控措施分类',
        colSpan: 0,
      },
      {
        dataIndex: 'cs',
        name: '管控措施',
      },
    ]
    let columns: ColumnsType<DataType> = []
    if (data.length > 0) {
      let fistArray = data[0]
      columns = Object.keys(fistArray).map((i, index) => {
        let currentObj = columnsConfig.find(z => i == z.dataIndex)
        return {
          title: currentObj?.name,
          dataIndex: i,
          colSpan: currentObj?.colSpan,
          onCell: (_, index) => {
            console.log(_, index, 2)
            return {}
          },
          render: (_, record, index) => {
            console.log(_, record, index, 22211)
            let rowSpan = getRowSpanCount(data, i, index)
            let children = <div>{record[i]}</div>
            return {
              children,
              props: {
                rowSpan,
              },
            }
          },
        }
      })
    }

    return columns
  }, [])
  return (
    <div>
      <Table columns={memoColums} dataSource={data} bordered pagination={false} />;
    </div>
  )
}
export default GroupTable
